<template>
	<el-dialog
		:title="title"
		:visible.sync="visible"
		destroy-on-close
		width="80%"
		@close="close">
		<div v-loading="loading">
			<el-form
				v-if="
					row.settleAccountsType != 14 && row.settleAccountsType != 4
				"
				:model="form"
				ref="formData"
				:inline="false"
				label-width="130px"
				size="normal"
				label-position="right">
				<el-row :gutter="30">
					<el-col :span="24">
						<div class="mini-title">客户信息</div>
					</el-col>

					<el-col :span="8">
						<el-form-item label="客户名称:" prop="customerName">
							<span>{{ form.customerName | filterNull }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="纳税识别号:" prop="taxpayerId">
							<span>{{ form.taxpayerId | filterNull }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="开户银行:" prop="customerBankName">
							<span>
								{{ form.customerBankName | filterNull }}
							</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item
							label="银行账号:"
							prop="customerBankAccountName">
							<span>
								{{ form.customerBankAccountName | filterNull }}
							</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item
							label="地址:"
							prop="customerAddr"
							:rules="[
								{
									required: true,
									message: '请输入地址',
									trigger: 'blur',
								},
							]">
							<el-input
								v-model="form.customerAddr"
								placeholder="请输入地址"
								size="mini"
								clearable></el-input>
						</el-form-item>
					</el-col>
					<!--                    <el-col :span="8">-->
					<!--                        <el-form-item label="邮箱:" prop="customerMail">-->
					<!--                            <span>{{ form.customerMail|filterNull }}</span>-->
					<!--                        </el-form-item>-->
					<!--                    </el-col>-->

					<el-col :span="24">
						<div class="mini-title">开票信息</div>
					</el-col>

					<el-col :span="8">
						<el-form-item
							label="发票类型:"
							prop="invoiceType"
							:rules="
								0 == type
									? {
											required: true,
											message: '请选择发票类型',
											trigger: 'change',
											validator: (
												rule,
												value,
												callback,
											) =>
												validData(
													rule,
													form.invoiceType,
													callback,
												),
									  }
									: {}
							">
							<el-select
								filterable
								v-if="0 == type"
								v-model="form.invoiceType"
								clearable
								style="width: 100%">
								<template
									v-for="dict in dict.type.invoice_type">
									<el-option
										:label="dict.label"
										:value="dict.value"
										:key="dict.value"></el-option>
								</template>
							</el-select>

							<span v-else>
								<dict-tag
									:options="dict.type.invoice_type"
									:value="form.invoiceType" />
							</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="开票金额:" prop="invoiceAmount">
							<span>{{ form.invoiceAmount | filterNull }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item
							label="发票号码:"
							prop="invoiceCode"
							:rules="
								0 == type
									? {
											required: true,
											message: '请输入发票号码',
											trigger: 'blur',
											validator: (
												rule,
												value,
												callback,
											) =>
												validData(
													rule,
													form.invoiceCode,
													callback,
												),
									  }
									: {}
							">
							<el-input
								maxlength="50"
								v-if="0 == type"
								type="text"
								style="width: 80%"
								v-model="form.invoiceCode"
								clearable
								placeholder="请输入发票号码"></el-input>
							<span class="text-bold" v-else>
								{{ form.invoiceCode | filterNull }}
							</span>
						</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item
							label="发票附件:"
							prop="invoiceImg"
							style="width: 100%"
							:rules="
								0 == type
									? {
											required: true,
											message: '请选择附件',
											trigger: 'change',
											validator: (
												rule,
												value,
												callback,
											) =>
												validData(
													rule,
													form.invoiceImg,
													callback,
												),
									  }
									: {}
							">
							<ImageCommon
								:disabled="1 == type"
								:key="imageKey"
								:up-type="2"
								info="选择附件"
								:limit="9"
								v-model="form.invoiceImg"></ImageCommon>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div v-else>
				<div class="mini-title">客户信息</div>
				<AForm
					ref="formData1"
					:config="formList"
					v-model="form"
					:layout="{ inline: true }"></AForm>
				<div class="mini-title">开票信息</div>
				<AForm
					ref="formData2"
					:config="formList2"
					v-model="form"
					:layout="{ inline: true }"></AForm>
			</div>
		</div>
		<span slot="footer">
			<el-button @click="close">取消</el-button>
			<el-button type="primary" @click="confim">提交</el-button>
		</span>
	</el-dialog>
</template>
<script>
	import { isEmpty } from 'lodash';
	import {
		settleInvoiceAdd,
		settleInvoiceDetail,
	} from '@/api/finance/manage/settle/api';
	import {
		customerInvoice,
		MerchantInvoice,
	} from '@/api/memberManage/memberList';
	import { getOrderDetail } from '@/api/vehicleOrder';
	import AForm from '@/components/A/A-form/form/index.vue';
	export default {
		components: { AForm },
		name: 'InvoiceDialog',
		dicts: ['invoice_type'],
		data() {
			return {
				type: 0,
				title: '开票',
				visible: false,
				form: {
					customerName: '',
					taxpayerId: '',
					customerBankName: '',
					customerBankAccountName: '',
					customerAddr: '',
					invoiceType: '',
					invoiceAmount: '',
					invoiceCode: '',
					invoiceImg: '',
				},
				imageKey: 0,
				loading: false,
				row: {},
			};
		},
		computed: {
			formList() {
				return [
					{
						label: '客户名称',
						prop: 'customerName',
						state: 'readonly',
					},
					{
						label: '税号',
						prop: 'taxpayerCode',
						state: 'readonly',
						show: this.row.invoiceName == 2,
					},
					{
						label: '开户银行',
						prop: 'customerBankName',
						state: 'readonly',
					},
					{
						label: '银行账号',
						prop: 'customerBankAccountName',
						state: 'readonly',
					},
					{
						label: '地址',
						prop: 'customerAddr',
						rules: true,
						type: 'input',
					},
					{
						label: '联系电话',
						prop: 'phone',
						state: 'readonly',
					},
					{
						label: '邮箱',
						prop: 'customerMail',
						state: 'readonly',
					},
				];
			},
			formList2() {
				return [
					{
						label: '发票类型',
						prop: 'invoiceType',
						type: 'select',
						dict: {
							list: this.dict.type.invoice_type,
						},
						rules: true,
						state: 'readonly',
					},
					{
						label: '发票金额',
						prop: 'invoiceAmount',
						type: 'price',
						state: 'readonly',
					},
					{
						label: '发票号码',
						prop: 'invoiceCode',
						type: 'input',
						rules: true,
					},

					{
						label: '发票附件',
						prop: 'invoiceImg',
						type: 'upload',
						upload: {
							limit: 1,
							type: 2,
						},
						rules: true,
					},
				];
			},
		},
		mounted() {},
		methods: {
			validData(rule, value, callback) {
				// console.log('aaa', rule, value, callback)
				if (rule.required && !value) {
					// this.$modal.msgError(`未填写${value}`);
					callback(new Error(rule.message));
				} else {
					callback();
				}
			},
			// 确定按钮
			async confim() {
				if (
					this.row.settleAccountsType != 14 &&
					this.row.settleAccountsType != 4
				) {
					this.$refs.formData.validate(valid => {
						if (valid) {
							this.save();
						}
					});
				} else {
					let pass1 = await this.$refs.formData1.valid();
					let pass2 = await this.$refs.formData2.valid();
					if (pass1 && pass2) {
						this.save();
					}
				}
			},
			save() {
				this.$modal.loading('正在提交数据，请稍后...');
				settleInvoiceAdd(this.form)
					.then(res => {
						if (res.code == 200) {
							this.close();
							this.$emit('success');
							this.$message({
								type: 'success',
								message: '提交成功',
							});
						}
					})
					.finally(f => {
						this.$modal.closeLoading();
					});
			},
			/**
			 * 显示弹框
			 * @param {0:新增 1:详情} type
			 * @param settleId
			 */
			//row.invoiceStatus, row.settleId
			show(row, type) {
				this.row = row;
				this.form = {
					customerName: '',
					taxpayerId: '',
					customerBankName: '',
					customerBankAccountName: '',
					customerAddr: '',
					invoiceType: '',
					invoiceAmount: '',
					invoiceCode: '',
					invoiceImg: '',
				};
				this.type = row.invoiceStatus;
				// 延时处理重置数据,防止数据污染
				// this.$nextTick(() => {
				// 	this.$refs.formData && this.$refs.formData?.resetFields?.();
				// });

				this.title =
					type == 'isNegativeInvoices' ? '开负数发票' : '开票';
				this.loading = true;
				// if (1 == this.type) {
				// 	settleInvoiceDetail(row.settleId)
				// 		.then(res => {
				// 			if (res.code == '200') {
				// 				this.form = res.data?.[0]
				// 					? res.data?.[0]
				// 					: {} ?? {};
				// 				this.$forceUpdate();
				// 			}
				// 		})
				// 		.finally(() => {
				// 			this.loading = false;
				// 		});
				// } else {
				this.form.invoiceAmount = row.settleAccountsAmount;
				this.form.settleId = row.settleId;
				this.form.settleCode = row.settleCode;
				if (
					row.settleAccountsType == 14 ||
					row.settleAccountsType == 4
				) {
					MerchantInvoice(row.settleId)
						.then(res => {
							if (type == 'isNegativeInvoices') {
								// 开负数发票
								this.form =
									res.data?.find(
										item =>
											item.isNegativeNumberInvoice == 1,
									) ?? {};
							} else {
								// 发票
								this.form =
									res.data?.find(
										item =>
											item.isNegativeNumberInvoice != 1,
									) ?? {};
							}

							// this.form.customerAddr = undefined;
							this.form.invoiceCode = undefined;
							this.form.invoiceImg = undefined;
						})
						.finally(() => {
							this.loading = false;
						});
				} else {
					customerInvoice(row.earnCustomerId)
						.then(res => {
							if (res.data) {
								this.form.customerId = res.data.customerId;
								this.form.customerName = res.data.invoiceTitle;
								this.form.taxpayerId =
									res.data.taxpayerIdentityNumber;
								this.form.customerBankName = res.data.bankName;
								this.form.customerBankAccountName =
									res.data.bankAccountName;
								this.form.customerAddr = res.data.invoiceAddr;
								this.form.invoiceCode = undefined;
								this.form.invoiceImg = undefined;
							}

							this.$forceUpdate();
						})
						.finally(() => {
							this.loading = false;
						});
				}
				this.$forceUpdate();
				// row.orderCode = row.orderCode.replace(/[\[\]]/g, '')
				// getOrderDetail(row.orderCode).then(res=>{
				//     this.form.invoiceType = res.data.invoiceType
				//
				//     this.$forceUpdate()
				// })
				// }
				this.imageKey++;
				this.visible = true;
			},
			close() {
				this.form = {
					customerName: '',
					taxpayerId: '',
					customerBankName: '',
					customerBankAccountName: '',
					customerAddr: '',
					invoiceType: '',
					invoiceAmount: '',
					invoiceCode: '',
					invoiceImg: '',
				};
				this.visible = false;
			},
		},
	};
</script>
<style lang="scss" scoped>
	.editStyle {
		width: 200px;
	}

	.el-input__inner {
		height: 32px !important;
		line-height: 32px !important;
	}
</style>
